<template>
  <!--选择代理商价格组-->
  <div class="tuika">
    <ul class="list">
      <li v-for="item in agentPriceList">
        <ul>
          <li>{{item.agentPriceName}}</li>
          <li v-if="item.percentageType==1">加减价类型:加价</li>
          <li v-if="item.percentageType==2">加减价类型:减价</li>
          <li>百分比:{{item.percentage}}</li>
          <li>
            <p>
              <span>创建日期：{{item.createDate}}
              </span>
            </p>
            <wv-button type="default" :mini="true" class="lookdetail" @click="selectAgentPrice(item.agentPriceId)">选择
            </wv-button>
          </li>
        </ul>
      </li>
    </ul>
    <p class="offer" @click="goAddAgentPrice()">新建</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getAgentPriceList} from '../../utils/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'selectAgentPrice',
    props: {},
    data() {
      return {
        agentId: '',
        agentPriceList: []
      };
    },
    methods: {
      goAddAgentPrice() {
        this.$router.push({path: '/addAgentPrice', query: {agentId: this.agentId}});
      },
      selectAgentPrice(agentPriceId) {
        this.$router.push({path: '/invite', query: {agentPriceId, agentPriceId}});
      },
      getData(params) {
        getAgentPriceList(params).then(res => {
          console.log(res)
          if (res.code == 100) {
            this.agentPriceList = res.object;
          } else {
            Toast.text(res.info);
          }
        })
      },
    },
    created() {
      this.agentId = this.$route.query.agentId;
      this.getData({})
    },
    components: {}
  }
</script>


<style scoped lang="less" rel="stylesheet/less">

  .list {
    padding-bottom: 70px;

    > li {
      margin: 15px 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;

      li {
        margin-bottom: 10px;
      }

      li:first-child {
        font-size: 16px;
        color: #111;
        font-weight: 700;

        span {
          color: #999;
          margin-left: 10px;
        }

        .status {
          font-size: 13px;
          float: right;
          font-weight: normal;
        }
      }

      li:last-child {
        font-size: 12px;
        color: #666;
        display: flex;
        text-align: left;

        .lookdetail {
          background-color: #fff;
          border: 1px solid #2e94f0;
          color: #2e94f0;
          margin-bottom: 10px;
        }

        p {
          flex: 1;
        }
      }
    }

    > li:last-child {
      border-bottom: none;
    }

  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #2e94f0;
    height: 50px;
    line-height: 50px;
    color: #fff;

    img {
      vertical-align: middle;
      margin-right: 5px;
    }
  }

</style>
